<template>
	<section>
		<div>
			<div class="glass-box">
				<div class="text">
					<div style="position:relative">
						<p style="display: inline-block;">
							<span style="font-size:24px;float:left;margin-top:21px;color:#318e8b">自动变焦中</span>
							<h2 style="float:right" class="timer count-title" id="count-number" data-to="900" data-speed="1500">{{count}}.00</h2>
						</p>
						<div class="pa p1"><img width="100%" src="@/assets/scene/weilaiyanjing/line.png"></div>
						<div class="pa p2"><img width="100%" src="@/assets/scene/weilaiyanjing/number.png"></div>
					</div>
				</div>
				<img width="100%" src="@/assets/scene/weilaiyanjing/main.jpg" alt="">
			</div>
		</div>
	</section>
</template>
<script>
export default {
	data() {
		return {
			count: 320,
			speed: 150,
			max: 900
		}
	},
	methods: {
		loopNumber() {
			setTimeout(() => {
				let count = this.count + 60;

				if (count < this.max) {
					this.count = count;
					this.loopNumber();
				} else {
					this.count = this.max
					//重新变
					this.count = 320;
					this.loopNumber();
				}

			}, this.speed)
		}
	},
	mounted() {
		this.loopNumber();
	}

}

</script>
<style type="text/css" media="screen">
/*body {
	font-family: "微软雅黑";
	background-color: #f5f5f5;
	color: #808080;
	text-align: center;
}*/


/** {
	padding: 0;
	margin: 0;
}*/

.wrapper {
	width: 980px;
	margin: 30px auto;
	position: relative;
}

.counter {
	background-color: #ffffff;
	padding: 20px 0;
	border-radius: 5px;
}

.count-title {
	font-size: 40px;
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 0;
	text-align: center;
}

.count-text {
	font-size: 13px;
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 0;
	text-align: center;
}

.fa-2x {
	margin: 0 auto;
	float: none;
	display: table;
	color: #4ad1e5;
}



.text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 274px;
	height: 600px;
	margin: -272px -115px;
}

#count-number {
	color: #0efbf3;
}

.glass-box {
	position: relative;
}

.pa {
	position: absolute;
}

.p1 {
	width: 346px;
	height: 152px;
	top: 94px;
	left: 0;
	animation: a1 linear .3s both;
	opacity: 0;
	transform: translate(100px);
}

.p2 {
	width: 314px;
	height: 192px;
	top: 72px;
	left: 24px;
	animation: a2 .3s linear .3s both;
	opacity: 0;
	transform: translate(100px);
}


@keyframes a1 {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes a2 {
	to {
		opacity: 1;
		transform: none;
	}
}

</style>
